@charset "utf-8";
@import 'sass/sassFn';
@import 'sass/sassAttr';

//------flex-box-----
.flexBox {
	@extend %dis-box;
}
.hor {
	@include f-webkit(box-orient, horizontal);
	word-break: break-all;
	.f1, .f2, .f3, .f4, .f5, .f6, .f7 { width: 1%; position: relative; }
}
.ver {
	@include f-webkit(box-orient, vertical);
	word-break: break-all;
	.f1, .f2, .f3, .f4, .f5, .f6, .f7 { height: 1%; position: relative; }
}
.f1 { @include f-webkit(box-flex, 1); }
.f2 { @include f-webkit(box-flex, 2); }
.f3 { @include f-webkit(box-flex, 3); }
.f4 { @include f-webkit(box-flex, 4); }
.f5 { @include f-webkit(box-flex, 5); }
.f6 { @include f-webkit(box-flex, 6); }
.f7 { @include f-webkit(box-flex, 7); }
#header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 998;
}
footer {
	background: #463b25;
	font-size: .9rem;
	padding: 1rem;
	color: #d5c49c;
	text-align: center;
}
#container { padding: 0 1.2rem 2rem; }
.menu {
	position: fixed;
	z-index: 9999;
	top: 1.7rem;
	right: 1.7rem;
	&.open {
		ul { display: block; }
	}
	ul {
		display: none;
		position: absolute;
		right: 0;
		top: 4.5rem;
		width: 10rem;
		background: rgba(0, 0, 0, .8);
		border-radius: .5rem;
		padding: .8rem;
		@include f-webkit(box-sizing, border-box);
		&:before {
			position: absolute;
			content: '';
			border-bottom: 1.1rem solid rgba(0, 0, 0, .8);
			border-left: 1.1rem solid transparent;
			border-right: 1.1rem solid transparent;
			top: -1.1rem;
			right: .7rem;
		}
		a {
			color: #fff;
			font-size: 1.3rem;
			display: block;
			padding: .8rem 0;
			text-align: center;
			border-bottom: 1px solid rgba(255, 255, 255, .2);
			&:last-child { border-bottom: none; }
		}
	}
}
.icon {
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	&.w1 {
		width: 3rem;
		height: 3rem;
	}
	&.w2 {
		width: .85rem;
		height: .85rem;
	}
}
.icon-menu-btn { background-image: url(../images/icon-menu-btn.png); }
.icon-back { background-image: url(../images/back.png); }
.icon-arrow-down { background-image: url(../images/icon-arrow-down.png); }
.icon-jobs { background-image: url(../images/icon-jobs.png); }

.swiper-pagination-bullet {
	width: .6rem;
	height: .6rem;
	background: #fff;
	opacity: 1;
	&.swiper-pagination-bullet-active { background: $main-color1; }
}
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet { margin: 0 .3rem; }
nav {
	border-bottom: 1px solid #d5d5d5;
	text-align: center;
	font-size: 0;
	a {
		display: inline-block;
		width: 7.8rem;
		height: 8.8rem;
		margin: 1.4rem 1.3rem;
		background: url(../images/category-bg.png) no-repeat;
		background-size: cover;
	}
	img {
		width: 3.8rem;
		margin: 1.2rem 0 .2rem;
	}
	.txt {
		font-size: 1.2rem;
		color: #fff;
	}
}
.colmun-title {
	padding: 1.5rem 0;
	font-size: 20px;
	text-align: center;
	color: #686868;
	font-weight: normal;
	span {
		position: relative;
		&:before,
		&:after {
			position: absolute;
			top: 50%;
			content: '';
			width: .4rem;
			height: .4rem;
			margin-top: -.2rem;
			background: #686868;
			@include f-webkit(transform, rotate(45deg));
		}
		&:before { left: -1rem; }
		&:after { right: -1rem; }
	}
}
.cover-img {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.graphic {
	padding: 0 .8rem;
	&.col-2 {
		@extend %clearfix;
		figure {
			float: left;
			width: 50%;
		}
		figcaption {
			height: 3.2rem;
			overflow : hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}
	figure {
		padding: 0 .8rem;
		margin-bottom: 1.6rem;
		@include f-webkit(box-sizing, border-box);
	}
	.warp {
		border: 1px solid #d8d8d8;
		border-radius: 1px;
		padding: .4rem .4rem 0;
		@include f-webkit(box-sizing, border-box);
	}
	figcaption {
		margin: 1rem 0;
		font-size: 1.1rem;
		color: #333333;
		font-size: 1.2rem;
	}
	time {
		display: block;
		border-top: 1px solid #d8d8d8;
		padding: 1rem 0;
		font-size: .8rem;
	}

}
.menu-tab-warp {
	margin-bottom: 2rem;
	-webkit-overflow-scrolling : touch; 
	overflow-x : auto;
	height: 3.3rem;
}
.menu-tab {
	height: 3.1rem;
	border-bottom: 1px solid #dedede;
	a {
		position: relative;
		float: left;
		border-right: 1px solid #dedede;
		font-size: 1rem;
		color: #666666;
		padding: 0 1.3rem;
		line-height: 3.1rem;
		@include f-webkit(box-sizing, border-box);
		&.current {
			color: $main-color1;
			font-weight: bold;
		}
		&.current:before {
			position: absolute;
			content: '';
			height: 3px;
			left: 0;
			right: 0;
			background: #fff;
			bottom: -2px;
		}
	}
}
.hgroup {
	@extend %position;
	@extend %txt-ver;
	@extend %txt-hor;
	h1 {
		font-size: 1.8rem;
		color: #ece2bf;
	}
	h2 {
		font-size: 1.15rem;
		letter-spacing: .2rem;
		font-weight: normal;
		color: #ede3c0;
	}
	.line {
		position: relative;
		display: block;
		height: 1px;
		margin: .8rem 0;
		background: rgba(255, 255, 255, .2);
		&:before {
			position: absolute;
			top: 50%;
			left: 50%;
			content: '';
			width: .4rem;
			height: .4rem;
			margin-top: -.2rem;
			margin-left: -.2rem;
			background: #ece3bf;
			@include f-webkit(transform, rotate(45deg));
		}
	}
}
article {
	header {
		margin-bottom: 1rem;
		text-align: center;
		border-bottom: 1px solid #cacaca;
		p {
			padding: .7rem 0;
			font-size: .9rem;
			color: #666;
		}
	}
	.title {
		font-size: 1.4rem;
		font-weight: normal;
		color: #333;
		
	}
	.article {
		font-size: 1.1rem;
		line-height: 2rem;
		p { margin-bottom: 2rem; }
	}

	img { max-width: 100%; }
}
.back {
	@extend %dib;
	padding: .5rem 1rem;
	font-size: 1rem;
	border: 1px solid #bfbfbf;
	border-radius: 3px;
}
.jobs {
	padding: 0 1.2rem;
	.item {
		position: relative;
		border-bottom: 1px solid #d0d0d0;
		padding-bottom: 1.5rem;
		margin-bottom: 1.5rem;
		line-height: 2rem;
	}
	a.icon {
		position: absolute;
		top: 50%;
		margin-top: -1.5rem;
		right: 0;
	}
}
input[type=text] {
	border: 1px solid #d0d0d0;
	border-radius: .5rem;
	height: 3.6rem;
	width: 100%;
	padding: 1rem;
	margin-bottom: .8rem;
	@include f-webkit(box-sizing, border-box);
}
textarea {
	@extend input[type=text];
	height: 18.8rem;
}
input[type=reset],
input[type=submit] {
	border: none;
	padding: 0;
	border-radius: .5rem;
	height: 3.6rem;
	width: 100%;
	background: #9e8555;
	color: #fff;
	font-size: 1.3rem;
	margin-bottom: .8rem;
	@include f-webkit(box-sizing, border-box);
}
input[type=submit] { background: #0b0b0b; }
.contact {
	line-height: 2rem;
	font-size: 1.05rem;
}
.map-warp {
	margin-top: 1.5rem;
	height: 18rem;
}
.scroll-more-btn {
	text-align: center;
	padding: .5rem 0 2.5rem;
}